<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="userAccount"
          name="userAccount"
          label="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="userPassword"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="checkedPassword"
          type="password"
          name="checkedPassword"
          label="确认密码"
          placeholder="请确认密码"
          :rules="[{ required: true, message: '请确认密码' }]"
      />
      <van-field
          v-model="userName"
          name="userName"
          label="昵称"
          placeholder="请输入昵称"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field name="radio" label="性别" :rules="[{ required: true}]">
        <template #input>
          <van-radio-group v-model="gender" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="0">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-divider content-position="left">已选标签</van-divider>
      <div v-if="activeIds.length === 0">请选择标签</div>
      <van-row gutter="16" style="padding: 0 16px">
        <van-col v-for="tag in activeIds">
          <van-tag closeable size="small" type="primary" @close="doClose(tag)">
            {{ tag }}
          </van-tag>
        </van-col>
      </van-row>
      <van-divider content-position="left">选择标签</van-divider>
      <van-tree-select
          v-model:active-id="activeIds"
          v-model:main-active-index="activeIndex"
          :items="tagList"
      />


      <van-field
          v-model="phone"
          name="phone"
          label="联系电话"
          placeholder="请输入联系电话"
          :rules="[{ required: false, message: '请填写手机号' }]"
      />
      <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="请输入邮箱"
          :rules="[{ required: false, message: '请填写邮箱' }]"
      />
      <van-field
          v-model="planetCode"
          name="planetCode"
          label="编号"
          placeholder="请输入编号"
          :rules="[{ required: true, message: '请填写编号' }]"
      />
      <van-field
          v-model="profile"
          name="profile"
          label="自我介绍"
          placeholder="自我介绍"
          :rules="[{ required: false, message: '请填写自我介绍' }]"
      />
      <div>
        <p>请上传头像</p>
        <van-uploader v-model="img" :after-read="afterRead" :max-count="1" :before-delete="beforeDelete"/>
      </div>


    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        注册
      </van-button>
    </div>

  </van-form>

</template>


<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import {getCurrentUser} from "../services/user";

const router = useRouter();

const userAccount = ref('');
const password = ref('');
const userName = ref('');
const phone = ref('');
const email = ref('');
const planetCode = ref('');
const gender = ref(1);
const profile = ref('');
const checkedPassword = ref('');
const img  = ref([]);
const avatarUrl = ref('');

const originTagList = [{
  text: '性别',
  children: [
    {text: '男', id: '男'},
    {text: '女', id: '女'},
  ],
},
  {
    text: '年级',
    children: [
      {text: '大一', id: '大一'},
      {text: '大二', id: '大二'},
      {text: '大3', id: '大三'},
      {text: '大4', id: '大四'},
    ],
  },
  {
    text: '技能',
    children: [
      {text: 'java', id: 'java'},
      {text: 'c++', id: 'c++'},
      {text: 'c#', id: 'c#'},
      {text: 'python', id: 'python'},
    ],
  },
  {
    text: '兴趣',
    children: [
      {text: '钓鱼', id: '钓鱼'},
      {text: '游戏', id: '游戏'},
      {text: '运动', id: '运动'},
      {text: '躺平', id: '躺平'},
    ],
  },
]


// 标签列表
let tagList = ref(originTagList);

// 已选中的标签
const activeIds = ref([]);
const activeIndex = ref(0);

// 移除标签
const doClose = (tag) => {
  activeIds.value = activeIds.value.filter(item => {
    return item !== tag;
  })
}



const onSubmit = async () => {
  const res = await myAxios.post('/user/register', {
    userAccount: userAccount.value,
    password: password.value,
    userName: userName.value,
    phone: phone.value,
    email: email.value,
    planetCode: planetCode.value,
    gender: gender.value,
    tags: activeIds.value,
    profile: profile.value,
    checkedPassword: checkedPassword.value,
    avatarUrl: avatarUrl.value,
  })
  if (res.code === 0 && res.data) {
    Toast.success('注册成功');
    // 跳转到之前的页面
   location.href = '/user/login';
  } else {
    Toast.fail(res.description ? res.description : '注册失败');
  }
};

const afterRead = (file) => {
  let content = file.file;
  let data = new FormData();
  data.append('file',content);
  myAxios.post('/user/upload',data)
      .then((res) => {
        if (res.code === 0 && res.data){
          img.value = res.data;
          avatarUrl.value = img.value[0];
          Toast.success('上传成功');
        }else{
          Toast.fail('上传失败');
        }

      })
};

const beforeDelete = () => {
    img.value = [];
}
</script>


<style scoped>

</style>


